<style type="text/css">
#my_video_choose .modal-dialog { width: 900px; }
#my_video_choose .modal-body { padding: 12px 0; }
#my_video_choose #video_list { height: 400px; overflow: auto; position: relative; }
#my_video_choose .spinner { zoom: 1.8; position: absolute; top: 50%; margin-top: -15px; left: 0; right: 0; z-index: 1; }
#my_video_choose .video_detail { display: inline-block; margin-left: 12px; float: left; overflow: hidden; }
#my_video_choose .video_detail img { width: 100%; height: 100%; object-fit: cover; transition: all .5s ease; -webkit-transition: all .5s ease; }
#my_video_choose .video_detail .mask { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .4); opacity: 0; transition: all .5s ease; -webkit-transition: all .4s ease; cursor: pointer; }
#my_video_choose .video_detail:hover .mask { opacity: 1; z-index: 1; }
#my_video_choose .video_detail.selected .mask { opacity: 1; cursor: default; z-index: 1; }
#my_video_choose .mask { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .4); opacity: 0; transition: all .5s ease; -webkit-transition: all .4s ease; cursor: pointer; }
#my_video_choose .mask .ok_icon { position: absolute; font-size: 40px; top: 50%; text-align: center; width: 100%; margin-top: -23px; color: #fff; }
#my_video_choose .richvideo_content { position: relative; margin-bottom: 10px; border: 1px solid #e7e7eb; background-color: #fff; overflow: hidden; color: #8d8d8d; width: 280px; padding: 10px 14px 12px; }
#my_video_choose .richvideo_content .title { font-size: 16px; font-weight: 400; font-style: normal; word-wrap: break-word; word-break: break-all; white-space: nowrap; padding: 5px 0; overflow: hidden; text-overflow: ellipsis; }
#my_video_choose .richvideo_content .time { padding-bottom: 6px; font-size: 13px; line-height: 20px; }
#my_video_choose .video_extra_info { height: 160px; position: relative; }
#my_video_choose .richvideo_content .video_thumb { width: 100%; height: 100%; display: block; object-fit: cover; }
#my_video_choose .richvideo_content .video_desc { word-wrap: break-word; word-break: break-all; padding-top: 4px; }
#my_video_choose .modal-footer { text-align: center; }
#my_video_choose .modal-footer .btn { width: 100px; }
</style>
<include file="./Application/Home/View/Common/backup/util_my_video_choose.html" />
<script type="text/javascript">
(function(){
    var $me = $('#my_video_choose');
    var searchParam = {
        page_num: 1,
        done: 'video'
    };

    var isLoading = 0,
        isNoData = 0;

    var result = [];

    $me.on('shown.bs.modal', function() {
        if ($('#video_list .video_detail', this).length) return;
        ajaxRequest();

    }).on('click', '.video_detail', function() {

        $(this).addClass('selected').siblings().removeClass('selected');

    }).find('#video_sure').on('click', function() {

        var selected = $('.video_detail.selected', $me);
        
        if (selected.length) {

            if (typeof window.imagesChooseCallback === 'function') {
                window.videoChooseCallback.call($me, {
                    'videoObj': result[selected.index()],
                    'videoThumb': $('.video_thumb', selected).attr('src')
                });
            }
            $me.modal('hide');
        } else {
            ShowTitleMessage.showWarning('请选择一个视频', showTime);
        }
    });

    $('#video_list', $me).scrollMax(function(){

        if (!isLoading && !isNoData) {

            searchParam.page_num ++;
            ajaxRequest();

        }

    });

    function ajaxRequest(fn) {
        isLoading = 1;
        $('.spinner', $me).show();
        $.ajax({
            type: 'post',
            url: BIGWE_API.COMMON.GET_MATERIAL_MPNEWS,
            data: searchParam,
            success: function(data) {
                data = typeof data === 'string' ? $.parseJSON(data) : data;
                if (data.ret) {
                    ShowTitleMessage.showWarning(data.msg || '未知的错误', showTime);
                    return;
                }
                if (!data.length) {
                    ShowTitleMessage.showWarning('没有数据了', showTime);
                    isNoData = 1;
                    return;
                }
                result = result.concat(data);
                var appendHtml = '';

                for(i in data) {
                    $('#video_list', $me).append(getVideoHtml(data[i]));
                }

                if (fn) {
                    fn.call($me);
                }
                
            },
            complete: function(){
                isLoading = 0;
                $('.spinner', $me).hide();
            }
        });
    }

    function getVideoHtml(video) {
        
        var html = '';
        html += '<div class="richvideo_content video_detail">';
        html += '<p class="title">' + (video.title || '') + '</p>';
        html += '<p class="time hide"></p>';
        html += '<div class="video_extra_info">';
        html += '<img class="video_thumb" onerror="this.src=\'Public/static/images/wuyulantu.png\'" src="' + video.address1 + '">';
        html += '<span class="video_length hide">0:09</span>';
        html += '</div>';
        html += '<div class="video_desc">' + (video.synopsis || '没有简介') + '</div>';
        html += '<div class="mask"><span class="glyphicon glyphicon-ok ok_icon"></span></div>';
        html += '</div>';

        return html;
    }
}());
</script>